<script setup>
import { RouterLink, RouterView } from "vue-router";
import { ref, onMounted, provide } from 'vue'
import SideNav from './components/navigation/SideNav.vue'

import * as echarts from 'echarts'
import * as three from 'three'
// import * as anime from 'animejs'

import anime from 'animejs/lib/anime.es.js'

import { myInjectionKey } from "./methods/staticSymbol/keys";

let somekeys = ref(["name", "price", "number"])
let showSide = true
function somekeysUpdate(keys) {
  somekeys.value = keys
  console.log("on provide", somekeys)
}

provide('echart', echarts)
provide('three', three)
provide('anime', anime)
provide(myInjectionKey, { somekeys, somekeysUpdate })

async function initGPU() {
  if (!navigator.gpu) {
    throw Error("WebGPU not supported.");
  }
  //console.log("navigator",navigator)

  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    throw Error("Couldn't request WebGPU adapter.");
  }

  const device = await adapter.requestDevice();
  //console.log("get gpu", device)
}
onMounted(() => {
  initGPU()
})
</script>

<template>
  <div class="A-con" v-if="showSide">
    <div class="A-top"></div>
    <div class="A-side-nav">
      <SideNav></SideNav>
    </div>
    <div class="A-content">
      <RouterView />
    </div>
  </div>
  <div class="A-con" v-else>
    <RouterView />
  </div>
</template>

<style scoped lang="scss"> .A-con {
   width: 100vw;
   height: 100vh;
   background-color: lightgray;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
 }

 .A-top {
   width: 100vw;
   height: $headHeight;
   background-color: #E6A23C;
 }

 .A-side-nav {
   width: $sideNavWidth;
   height: calc(100% - $headHeight);
   background-color: #f3d19e;

   overflow-y: scroll;
 }

 .A-content {
   width: calc(100% - $sideNavWidth);
   height: calc(100% - $headHeight);
   background-color: white;

   overflow-y: scroll;
 }

 @media (min-width: 1024px) {
   header {
     display: flex;
     place-items: center;
     padding-right: calc(var(--section-gap) / 2);
     background-color: lightgray;
   }

   .logo {
     margin: 0 2rem 0 0;
   }

   header .wrapper {
     display: flex;
     place-items: flex-start;
     flex-wrap: wrap;
   }

   nav {
     text-align: left;
     margin-left: -1rem;
     font-size: 1rem;

     padding: 1rem 0;
     margin-top: 1rem;
   }
 }
</style>
